<template>
    <el-config-provider :locale="locale">
        <el-container class="app-container" v-watermark="watermark">
            <el-header class="app-container-head">
                <div class="logo-box">
                    <a class="a-title" href="https://www.npmjs.com/package/sibionics-ui-next" target="_blank">Sibionics UI Next PC端组件库演示</a>
                    <a class="a-download" href="http://bearsee.com.cn/sibionics-ui-next-demo/#/index" target="_blank">（查看演示demo）</a>
                    <span class="element-target">
                        （基于
                        <a href="https://cn.vuejs.org/" target="_blank">vue@3.x</a>
                        +
                        <a href="https://element-plus.org/zh-CN/guide/design.html" target="_blank">element-plus@2.x</a>）
                    </span>
                </div>
                <div class="setting-box">
                    <span>当前版本：v{{ version }}</span>
                    <el-dropdown @command="changeLanguage" popper-class="languages-popper">
                        <span class="el-dropdown-link">
                            {{ languages.find(({ value }) => value === currentLang).label }}
                            <el-icon class="el-icon--right">
                                <arrow-down></arrow-down>
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="(lang, index) in languages" :key="index" :command="lang.value">
                                    {{ lang.label }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-color-picker v-model="theme" :predefine="predefine" @change="changeThemeColor"></el-color-picker>
                </div>
            </el-header>
            <el-container class="app-container-body">
                <sib-menu
                    class="side-menu"
                    router
                    unique-opened
                    :default-active="defaultActiveMenu"
                    :menus="menus"
                    :auto-collapse-width="1300">
                </sib-menu>
                <el-container class="center-body">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item v-for="(item, i) in breadcrumbs" :key="i">
                            {{ item.name }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-main id="main-container" class="main-container transverse-scroll vertical-scroll">
                        <!-- Vue Router 中使用了 <router-view> 组件并将其直接放在了 <transition> 或 <keep-alive> 中，这种用法已经被废弃，应该使用插槽传递组件并在插槽中进行渲染。 -->
                        <!-- <router-view v-slot="{ Component }">
                            <keep-alive>
                                <component :class="['main-container-page', articleTree.length && 'has-article' || '']" :is="Component"></component>
                            </keep-alive>
                        </router-view> -->
                        <router-view :class="['main-container-page', articleTree.length && 'has-article' || '']"></router-view>
                        <div class="article-tree-box vertical-scroll" v-show="articleTree.length">
                            <div class="art-title">
                                CONTENTS
                            </div>
                            <div class="art-items">
                                <div v-for="(art, i) in articleTree" :key="art.id" :title="art.title || art.id" :class="['art-item', i === currentLinkIndex && 'active' || '']">
                                    <span class="mark"></span>
                                    <span class="link cut_font" @click="scroll(art.id, i)">{{ art.title || art.id }}</span>
                                </div>
                            </div>
                        </div>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </el-config-provider>
</template>
<script>
import { ref, computed, inject } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import menuConfig from './utils/menus-config';
import { getLocales, changeLang } from './locale';

const { version } = require('../package.json');

export default {
    setup() {
        const route = useRoute();
        const store = useStore();
        const defaultActiveMenu = computed(() => route.path);
        const changeThemeColor = inject('$changeThemeColor');
        const resetThemeColor = inject('$resetThemeColor');
        // const getThemeClusters = inject('$getThemeClusters');
        const theme = ref(window.localStorage.getItem('current_theme_color') || '#00c4a3');
        const currentLang = computed(() => store.state.language);
        const locale = computed(() => getLocales(currentLang.value));
        const menus = menuConfig;
        const breadcrumbs = computed(() => [
            menus.find(({ path }) => route.path && path === route.path),
            menus.find((item) => (item.children || []).find(({ path }) => path === route.path)),
            ((menus.find((item) => (item.children || []).find(({ path }) => path === route.path)) || {}).children || []).find(({ path }) => path === route.path),
        ].filter((d) => d));
        const articleTree = computed(() => store.state.articleTree);
        const currentLinkIndex = computed(() => store.state.currentLinkIndex);

        return {
            version,
            defaultActiveMenu,
            theme,
            locale,
            articleTree,
            currentLinkIndex,
            predefine: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
            ],
            languages: [
                {
                    label: '简体中文',
                    value: 'zh-CN',
                },
                {
                    label: '繁体中文',
                    value: 'zh-TW',
                },
                {
                    label: '英文',
                    value: 'en-US',
                },
            ],
            currentLang,
            changeThemeColor: (color) => {
                changeThemeColor(color);
                if (!color) {
                    resetThemeColor();
                    theme.value = window.localStorage.getItem('current_theme_color') || '#00c4a3';
                }
            },
            changeLanguage(lang) {
                changeLang(lang);
            },
            scroll(id, index) {
                const dom = document.getElementById(id);
                if (dom) dom.scrollIntoView({ behavior: 'smooth', inline: 'nearest' });
                store.commit('updateCurrentLinkIndex', index);
            },
            watermark: 'sibionics-ui-next 组件库演示',
            menus,
            breadcrumbs,
        };
    },
};
</script>
